﻿@model Citi.GocAttributes.WebUI.Models.PagerModel
@using Webdiyer.WebControls.Mvc;
@if (Model.PagedList != null)
{
    <div style="text-align: center">
        @Html.AjaxPager(Model.PagedList, new PagerOptions
            {
                FirstPageText = "First",
                PrevPageText = "Previous",
                NextPageText = "Next",
                LastPageText = "Last",
                PageIndexParameterName = "page",
                ShowDisabledPagerItems = false,
                AlwaysShowFirstLastPageNumber = true
            }, Model.AjaxOptions)
    </div>
    return;
}
<script type="text/javascript">
    $(function () {
        $("table.tablesorter-blue").tablesorter({
            widthFixed: true,
            sortList: @(Model != null ? string.Format("[[{0},{1}]]", Model.ColumnStartIndex, (int)Model.ColumnStartOrder) : "[[0, 0 ]]"),
            sortLocaleCompare: true//,
//            widgets: ['zebra']
        })
            .tablesorterPager({
                container: $("#pager"),
                size: $(".pagesize option:selected").val(),
                cssPageSize: '.pagesize',
                cssNext: '.next',
                cssPrev: '.prev',
                cssFirst: '.first',
                cssLast: '.last',
                cssGoto: '.gotoPage',
                page: 0
            });
        
        $('table.tablesorter-blue').bind('pagerInitialized', function(e, c){
            this.config.serverSideSorting = false;
        });
    });
</script>
<div id="divPager">
    <div id="pager">
        <form>
        <img src="@Url.Content("~/Content/tablesorter/images/first.png")" class="first" alt="First"/>
        <img src="@Url.Content("~/Content/tablesorter/images/prev.png")" class="prev" alt="Previous" />
        <input type="text" class="pagedisplay" />
        <img src="@Url.Content("~/Content/tablesorter/images/next.png")" class="next" alt="Next" />
        <img src="@Url.Content("~/Content/tablesorter/images/last.png")" class="last" alt="Last" />
        <select class="pagesize">
            <option value="10" selected="selected">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
        </form>
    </div>
</div>
